<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor}">
		<view class="top-bar-bg"></view>
		<view class="status_bar">
		    <!-- 这里是状态栏 -->
		</view>
		<view class="p-md flex-between rel radius-10" style="padding-bottom: 0;">
			<view class="flex-start ">
				<view @click="$util.go('my/my_info',{login:true})">
					<u-avatar :src="userInfo.avatar" size="50"></u-avatar>
				</view>
				<view class="flex flex-column m-l-sm" v-if="userInfo">
					<view class="flex-start">
						<text class="text-sm">{{userInfo.username}}</text>
						<user-auth-icon class="m-l-xs" type="vip" size="35rpx" v-if="userInfo.level > 1"></user-auth-icon>
					</view>
					<view class="flex-start" >
						<text class="text-xs badge m-t-xs p-xs radius-5" @click="$util.copyText(userInfo.invitation_code)">{{$t('my.invitation-code')}}：{{ userInfo.invitation_code }}</text>
						
					</view>
				</view>
				<text class="text-sm m-l-sm" @click="$util.go('auth/login')" v-if="!userInfo">{{$t('my.none-login-tips')}}</text>
			</view>
			<view class="flex-center" @click="$util.go('setting/setting',{login:true})">
				<i-icon name="settings-line" size="40rpx" color="#3f2a17"></i-icon>
			</view>
		</view>
		<view class="m-userdata rel conter" v-if="userInfo" @click="$util.go('my/my_wallet',{login:true})">
			<view class="flex-between">
				<view class="u-item">
					<view class="value" :class="{mini:moneyMini}">
						<text>{{ userInfo.money }}</text>
					</view>
					<view class="title">{{$t('my.info-money')}}</view>
				</view>
				<view class="u-item">
					<view class="value" :class="{mini:moneyMini}">
						<text>{{ userInfo.capital_data.toadyMoney }}</text>
					</view>
					<view class="title">{{$t('my.info-today')}}</view>
				</view>
				<view class="u-item">
					<view class="value" :class="{mini:moneyMini}">
						<text>{{ userInfo.capital_data.allMoney }}</text>	
					</view>
					<view class="title">{{$t('my.info-all')}}</view>
				</view>
			</view>
			<i-icon :color="configInfo.mainColor" class="icon-bg" name="money-cny-circle-line"></i-icon>
		</view>
		<view class="m-vipcard conter" v-if="userInfo">
			<view class="flex-between flex-warp-nowarp" style="align-items: center;">
				<view class="flex-start flex-warp-nowarp" style="align-items:flex-start;">
					<u-icon name="integral" size="20" color="#e2d3b9" style="margin-right: 5px;"></u-icon>
					<view v-if="userInfo.level == 1 || !userInfo">
						<text>{{$t('my.vip-open-tips')}}</text>
					</view>
					<view v-if="userInfo.level > 1">
						<view>{{$util.handleStr($t('my.vip-tips'),userInfo.level_name)}}</view>
						<text style="color: #666;font-size: 23rpx;">{{$util.handleStr($t('my.vip-tips-1'),userInfo.level_time)}}</text>
					</view>
				</view>
				<text class="u-btn" @click="$util.go('vip/vip')" v-if="userInfo.level == 1 || !userInfo">{{$t('my.vip-btn')}}</text>
				<text class="u-btn" @click="$util.go('vip/vip')" v-if="userInfo.level > 1">{{$t('my.vip-action')}}</text>
			</view>
		</view>
		<view class="m-suborder conter">
			<view class="special-title">
				<view class="flex-between" style="align-items: center;">
					<text class="title">{{$t('my.task-title')}}</text>
					<text class="more" @click="$util.go('my/my_receive',{login:true})">{{$t('my.task-title-right')}}</text>
				</view>
			</view>
			<view class="u-list flex-start">
				<view class="item" v-for="(item,index) in recList" :key="index" @click="$util.go(item.url,{login:item.is_login})">
					<u-icon
						:label="item.label"
						labelPos="bottom" 
						size="30px" 
						labelSize="25rpx"
						:name="item.name">
					</u-icon>
				</view>
			</view>
		</view>
		<view class="m-funlist conter merchant" v-if="configInfo.join_merchant == 1 || userInfo.merchant">
			<u-cell-group :border="false">
				<u-cell :isLink="false" @click="userInfo.merchant && userInfo.merchant.state == 2 ? $util.go('pages/index',{path:'/merchant/',login:true}) : $util.go('pages/apply',{path:'/merchant/',login:true})">
					<view slot="icon" class="cell-icon">
						<i-icon name="store-line" size="36rpx" color="#333"></i-icon>
					</view>
					<text slot="title" class="cell-title">{{$t('merchant.entry-title')}}</text>
					<view slot="value" class="cell-value">
						<view v-if="userInfo.merchant">
							<m-icon :name="merchantState[userInfo.merchant.state].icon" size="12px" :color="merchantState[userInfo.merchant.state].color" :text="userInfo.merchant.state_text" ></m-icon>
						</view>
						<view v-if="configInfo.join_merchant == 1 && !userInfo.merchant">
							<text>{{$t('merchant.entry-join-title')}}</text> 
						</view>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		
<!-- 		<view class="m-funlist conter" v-if="userInfo && userInfo.userlevel && userInfo.userlevel.level_info.open_task == 1">
			<u-cell-group :border="false">
				<u-cell :isLink="true" @click="$util.go('pages/index',{path:'/merchant/',login:true})">
					<view slot="icon" class="cell-icon"><i-icon name="radio-line" size="36rpx" color="#333"></i-icon></view>
					<text slot="title" class="cell-title">{{$t('my.work-title')}}</text>
					<text slot="value" class="cell-value">{{$t('my.work-desc')}}</text>
				</u-cell>
			</u-cell-group>
		</view> -->
		
		<view class="m-funlist conter">
			<u-cell-group :border="false">
				<u-cell :isLink="true" v-for="(item,index) in funlist" :key="index" v-if="item.show" @click="$util.go(item.params.url,item.params)">
					<view slot="icon" class="cell-icon"><i-icon :name="item.name" size="36rpx" color="#333"></i-icon></view>
					<text slot="title" class="cell-title">{{item.label}}</text>
				</u-cell>
				 
				
			</u-cell-group>
		</view>
		<m-footcopy></m-footcopy>
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<!-- 插屏广告 -->
		<!-- 底部信息流广告 -->
		<view class="bannerAd conter" v-if="configInfo.xxl_adpid">
			<ad :adpid="configInfo.xxl_adpid" ad-intervals="100"></ad>
		</view>
		<!-- #endif -->
		
		<side-tools :scrollTop="scrollTop" :backShow="false"></side-tools>
		
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				moneyMini:false,
				integralMini:false,
				workList:[{
					label:this.$t('my.work-title'),
					name:"radio-line",
					params:{
						'type':'page',
						'is_login':true,
						'url':"my_info/my_info"
					},
					show:true
				}],
				merchantState:{
					1:{
						icon:'error-warning-line',
						color:'#ff9900',
					},
					2:{
						icon:'checkbox-circle-fill',
						color:'#19be6b',
					},
					3:{
						icon:'forbid-line',
						color:'#fa3534',
					},
					4:{
						icon:'close-circle-line',
						color:'#fa3534',
					},
				},
				adOption:[],
				scrollTop:0
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			recList: state => state.user.recList,
			funlist: state => state.user.funlist,
		}),
		
        async onLoad() {
			// this.setting = uni.getStorageSync('_config');
			this.initMy()
        },
		
		/* 页面显示 */
		async onShow(){
			// 获取用户信息
			this.getUserInfo()
		},
		
		/* 页面隐藏 */
		onHide(){
			// 关闭加载
			this.$util.hideAll()
		},
		
		async onPullDownRefresh(){
			this.initMy()
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getUserInfo']),

			initMy(){
				if(this.configInfo.problem_id){
					this.funlist[5].params.url = this.funlist[5].params.url+this.configInfo.problem_id;
				}else{
					this.funlist[5].show = false;
				}
				
				// alert(this.configInfo.kefu_type)
				if(this.configInfo.kefu_type == 2){
					this.funlist[6].params = {
						'type': 'link',
						'is_login':true,
						'is_tips': false,
						'url': this.configInfo.kefu_link
					};
					// this.funlist[7].show = false;
				}
				// if(){
					
				// }
			},
			

		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}

	// .top-bar-bg::after{
	// 	content: "";
	// 	position: fixed;
	// 	top: -180px;
	// 	left: -10%;
	// 	width: 80%;
	// 	height: 350px;
	// 	background-color: #ffffff30;
	// 	border-radius: 100%;
	// }

	.conter .u-title{

		.title::after{
			position: absolute;
			content: '';
			width: 13px;
			height: 12px;
			bottom: 0;
			right: -13px;
			background-image: url($horn);

		}
		// font-weight: 600;
		// padding: 10px;
		// border-bottom: 1px solid #f3f3f3;
	}
	/deep/ uni-image>div, uni-image>img{
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
		-ms-interpolation-mode: nearest-neighbor;
	}
	.m-userdata{
		background-color: #fff;
		padding: 10px 0;
		overflow: hidden;
	}
	.m-userdata .u-item{
		z-index: 2;
		font-size: 28rpx;
		text-align: center;
		width: 33%;
		overflow: hidden;
		font-size: 25rpx;
		color: #666;
		border-left: 1px solid #f3f3f3;
	}
	.m-userdata .u-item .value{
		font-size: 30rpx;
		font-weight: bold;
		// height: 20px;
		margin-bottom: 5px;
		color: #333;
		// .number{
		// 	font-size: 36rpx;
		// }
	}
	.m-userdata .u-item:nth-child(1){
		border-left:none;
	}
	.m-userdata .icon-bg{
		position: absolute;
		right: -20px;
		bottom: -20px;
		font-size: 70px!important;
		z-index: 1;
		opacity: .1;
	}
	.m-vipcard{
		background: #282828;
		color: #e2d3b9;
		padding: 10px;
		font-size: 26rpx;
		background: url('../../static/images/vip_bg.png') no-repeat;
		background-size: 100%;
	}
	
	.m-vipcard .u-btn{
		font-size: 25rpx;
		border-radius: 25px;
		padding: 3px 10px;
		color:$incolor-1;
		background-color: #e2d3b9;
	}
	.m-suborder{
		background-color: var(--theme-page-bg);
		.u-list{
			background-color: #fff;
			border-radius: 10px;
			border-top-left-radius: 0;
		}
	}
	.m-funlist{
		background-color: #fff;
	}
	.u-list{
		width: 100%;
		padding-top: 15px;
	}
	.u-list .item{
		width: 25%;
		padding-bottom: 15px;
	}
	.login-btn{
		border-radius: 25px;
		padding:15px 20px;
		font-size: 25rpx;
	}
	.merchant{
		// background-color: #333;
	}
	.cell-icon{
		position: relative;
		z-index: 1;
	}
	.cell-icon:after{
		position: absolute;
		content: '';
		width: 25rpx;
		height: 25rpx;
		border-radius: 100%;
		background-color: #ffd42680;
		right: 0rpx;
		bottom: 0rpx;
		z-index: -1;
	}
	/deep/ .side-tools{
		// #ifdef APP-PLUS
		bottom: 120rpx!important;
		// #endif
		// #ifdef H5
		bottom: 130rpx;
		// #endif
	}
</style>
